<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/layui.css">
	<style>
		.red{
			border-color: red;
		}
		.blue{
			border-color: blue;
		}
	</style>
</head>
<body>





<!-- <form class="layui-form"> -->
<div class="layui-form">
<div class="layui-form-item">
    <label class="layui-form-label">单行输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" required>
    </div>
  </div>
	<input type="radio" name="sex" title="男" value="男">
	<div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><span>男</span></div>
	<input type="radio" name="sex" title="女" checked="" value="女">
	<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><span>女</span></div>
	<input type="radio" name="sex" title="中性" disabled="">
	<div class="layui-unselect layui-form-radio layui-radio-disbaled layui-disabled"><i class="layui-anim layui-icon"></i><span>中性</span></div>


<div class="layui-unselect layui-form-checkbox" lay-skin=""><span>写作</span><i class="layui-icon"></i></div>
<div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked="">
      <input type="checkbox" name="like[game]" title="游戏">
    </div>
  </div>
  <input type="text" lay-verify="required" class="date">
  <input type="text" data-verify="num" required>
  <div class="layui-form-item" pane="">
    <label class="layui-form-label">原始复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
      <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
      <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">编辑器</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea" name="content" lay-verify="content" id="LAY_demo_editor" required></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
       <button class="layui-btn" lay-submit="" lay-filter="demo1" id="submit">立即提交</button>
      <!-- <a  id="submit">111</a> -->
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  </div>
<!-- </form> -->
<script src="jquery-1.9.1.min.js"></script>
	<script src="layui.js"></script>
	<script>
	$(function(){
		$('input[type="text"]:required,textarea:required').each(function(){
			$(this).blur(function(){
				var value = $(this).val();
				if(value == ''){
					$(this).addClass('red').removeClass('blue');
				}else{
					if($(this).attr('data-verify') == 'num'){
						if(!$(this).text().test(/\d+/)){
							return;
						}
					}
					$(this).addClass('blue').removeClass('red');
				}
			});
		});
	});
	layui.use(['form', 'layedit', 'laydate'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate;
		  
		  //日期
		  laydate.render({
		    elem: '#date'
		  });
		  laydate.render({
		    elem: '#date1'
		  });
  
		  //创建一个编辑器
		  // var editIndex = layedit.build('LAY_demo_editor');
		 
		  //自定义验证规则
		  form.verify({
		    title: function(value){
		      if(value.length < 5){
		        return '标题至少得5个字符啊';
		      }
		    },
		    pass: [/(.+){6,12}$/, '密码必须6到12位'],
		    content:function(value){
		    	if(value.length<1){
		    		return '不能为空';
		    	}
		    }
		  });
		  
		  //监听指定开关
		  form.on('switch(switchTest)', function(data){
		    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
		      offset: '6px'
		    });
		    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
		  });
		  
		  //监听提交
		  form.on('submit(demo1)', function(data){
		  	location.href = 'http://www.baidu.com';
		  	console.log(JSON.stringify(data.field));
		    // layer.alert(JSON.stringify(data.field), {
		    //   title: '最终的提交信息'
		    // })
		    return false;
		  });
	});
	</script>
</body>
</html>